<template>
    <section class="icons">
        <swiper :options="swiperOption">
            <swiper-slide v-for="(page,index) of pages" :key="index">
                <div class="icon"  v-for="item of page" :key="item.id">
                    <div class="icon-img">
                        <img :src="item.imgUrl">
                    </div>
                    <p>{{item.desc}}</p>
                </div>
            </swiper-slide>
        </swiper>
    </section>
</template>

<script>
export default {
  props:{
    list:Array
  },
  data(){
    return {
      swiperOption:{
        autoplay:false
      }
    }
  },
  computed: {
    pages() {
        const pages=[]
        this.list.forEach((item,index) => {
            const page =Math.floor(index/8)
            if(!pages[page]){
                pages[page]=[]
            }
            pages[page].push(item)
        });
        return pages
    }
  }
};
</script>

<style lang="stylus" scoped>
@import '~styles/varibles.styl'
@import '~styles/mixins.styl'
.icons >>> .swiper-container {
    width: 100%;
    height: 0;
    padding-bottom: 50%;
}
.icons{
  margin-top .1rem
}
.icon {
    position: relative;
    width: 25%;
    height: 0;
    padding-bottom: 25%;
    overflow: hidden;
    float: left;

    .icon-img {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0.44rem;

        img {
            height: 100%;
            margin: 0 auto;
            display: block;
        }
    }

    p {
        position: absolute;
        bottom: 0;
        right: 0;
        left: 0;
        line-height: 0.44rem;
        text-align: center;
        color: $darkTextColor;
        ellipsis()
    }
}
</style>